<template>
    <div class="componen-management">
        <p class="prompt">底部导航组件为固定页面底部，无需拖拽调整位置</p>
        <!-- 拖拽 -->
        <vuedraggable v-model="data" v-bind="dragOptions">
            <transition-group>
                <div v-for="(item, ind) in data" :key="item.text + ind" :class="item.text == '底部导航' ? 'item del-dragitem' : 'item'">
                    <p>
                        <i class="el-icon-s-grid" style="margin-right: 15px" />
                        {{ item.text }}
                    </p>
                    <el-popconfirm title="您确定要删除该组件吗?" icon="el-icon-warning" iconColor="red" @confirm="onConfirms(ind)">
                        <i class="el-icon-delete-solid" slot="reference" style="cursor: pointer" />
                    </el-popconfirm>
                </div>
            </transition-group>
        </vuedraggable>
    </div>
</template>

<script>
import vuedraggable from 'vuedraggable'; // 拖拽组件

export default {
    name: 'componenmanagement',
    props: ['datas'],
    components: { vuedraggable },
    data() {
        return {
            data: this.datas,
            dragOptions: {
                animation: 200,
                // class是 del-dragitem 禁止拖拽
                filter: '.del-dragitem',
            },
        };
    },
    methods: {
        /* 删除组件 */
        onConfirms(res) {
            this.data.splice(res, 1);
            this.$emit('componenmanagement', this.data);
        },
    },
    watch: {
        datas(newVal) {
            this.data = newVal;
        },
        data(newVal) {
            this.$emit('componenmanagement', newVal);
        },
    },
    computed: {},
};
</script>

<style scoped lang="less">
.componen-management {
    width: 100%;
    height: 100%;
    padding: 20px 5px;
    box-sizing: border-box;

    .prompt {
        margin-bottom: 10px;
    }

    /* 选项 */
    .item {
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        cursor: all-scroll;
        color: #323233;
        background-color: #fff;
        border-bottom: 1px solid #f2f4f6;

        // &:not(:last-child) {
        //     border-bottom: 1px solid #f2f4f6;
        // }

        i {
            color: #999;
        }
    }

    .del-dragitem {
        background-color: rgba(10, 42, 97, 0.2);
        cursor: no-drop;
    }
}
</style>
